﻿@{
    Layout = null;
}

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>jqGrid Sample</title>
<link href="~/Areas/JQueryGrid/Content/jquery-ui/redmond/jquery-ui-1.8.14.custom.css" rel="stylesheet" />
<link href="~/Areas/JQueryGrid/Content/jquery-grid/ui.jqgrid.css" rel="stylesheet" />
<script src="~/Areas/JQueryGrid/Scripts/jquery-1.6.2.min.js"></script>
<script src="~/Areas/JQueryGrid/Scripts/jquery-grid/grid.locale-en.js"></script>
<script src="~/Areas/JQueryGrid/Scripts/jquery-grid/jquery.jqGrid.min.js"></script>
<script type="text/javascript">
        // the url to 
    var jqDataUrl = "CustomerLoadData/";
    $(document).ready(function () {       
            // Set up the jquery grid
            $("#jqTable").jqGrid({
                // Ajax related configurations
                url: jqDataUrl,
                datatype: "json",
                mtype: "POST",

                // Specify the column names
                colNames: ["Id", "Customer Name", "Age", "Employee Code"],

                // Configure the columns
                colModel: [
            { name: "Id", index: "Id", width: 40, align: "left" },
            { name: "Name", index: "Name", width: 200, align: "left" },
            { name: "Age", index: "Age", width: 100, align: "left" },
            { name: "EmployeeCode", index: "EmployeeCode", width: 100, align: "left" }],

                // Grid total width and height
               
                width: 850,
                height: 350,

                // Paging
                toppager: false,
                pager: $("#jqTablePager"),
                rowNum: 25,
                rowList: [25, 50, 100, 150, 200, 300, 400, 500],
                viewrecords: true, // Specify if "total number of records" is displayed

                // Default sorting
                sortname: "Id",
                sortorder: "asc",

                // Grid caption
                caption: "JQuery Grid Sample ..."
            }).navGrid("#jqTablePager",
            { refresh: true, add: false, edit: false, del: false },
                {}, // settings for edit
                {}, // settings for add
                {}, // settings for delete
                {sopt: ["cn"]} // Search options. Some options can be set on column level
         );
        });
    </script>
</head>
<body>
    <div style="padding: 50px;">
        <table id="jqTable" class="scroll">
        </table>
        <div id="jqTablePager" />
    </div>
</body>
</html>
